<template>
    <el-row :gutter="10">
        <template v-for="(item, index) in properties" :key="index">
            <el-col :span="item.span" :xs="item.xs" :sm="item.sm" :md="item.md" :lg="item.lg" :xl="item.xl">
                <el-form-item :label="item.label" :label-width="item.labelWidth || labelWidth">
                    <div v-if="item.html" v-html="item.render ? item.render(detail) : detail[item.name]" />
                    <pre v-else-if="item.pre" :class="getClass(item)">{{item.render ? item.render(detail) : detail[item.name] }}</pre>
                    <img v-else-if="item.img" :class="getClass(item)" :src="item.render ? item.render(detail) : detail[item.name]" :alt="item.label" />
                    <span v-else :class="getClass(item)">{{item.render ? item.render(detail) : detail[item.name] }}</span>
                </el-form-item>
            </el-col>
        </template>
    </el-row>
</template>


<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'DetailFormItems',
    props: {
        detail: {
            type: [Map, Object],
            default: () => ({})
        },
        properties: {
            type: Array,
            default: () => []
        },
        labelWidth: {
            type: String,
            default: () => '120px'
        }
    },
    setup(props) {
        return {
            getClass: (property: any) => {
                if (property.styleClass) {
                    if (typeof (property.styleClass) == 'function') {
                        return property.styleClass(props.detail);
                    }
                    return property.styleClass;
                }
                return '';
            }
        };
    }
})
</script>